<div class="page-wrap height-100 mat-bg-primary">
  <div class="session-form-hold">
    <mat-progress-bar mode="determinate" class="session-progress"></mat-progress-bar>
    <mat-card>
      <mat-card-content>
        <div class="text-center pb-1">
          <img src="assets/images/logo-full.svg" alt="FreeNAS logo">
          <p class="text-muted">Sign up to use our service</p>
        </div>
        <form #signupForm="ngForm" (ngSubmit)="signup()">
          <div class="">
            <mat-form-field class="full-width">
              <input
                matInput
                type="email"
                name="email"
                required
                [(ngModel)]="signupData.email"
                #email="ngModel"
                placeholder="Your Email"
                pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
                value="">
            </mat-form-field>
            <small 
              *ngIf="email['errors'] && (email.dirty || email.touched) && (email['errors'].required)" 
              class="form-error-msg"> Email is required </small>

              <small 
                *ngIf="email['errors'] && (email.dirty || email.touched) && (email['errors'].pattern)" 
                class="form-error-msg"> Invaild email address </small>
          </div>

          <div class="">
            <mat-form-field class="full-width">
              <input 
                type="password"
                name="password"
                required
                matInput
                appEqualValidator="confirmPassword"
                reverse="true"
                [(ngModel)]="signupData.password"
                #password="ngModel"
                placeholder="Password" 
                value="">
            </mat-form-field>
            <small 
              *ngIf="password['errors'] && (password.dirty || password.touched) && (password['errors'].required)" 
              class="form-error-msg"> Password is required </small>
          </div>
          
          <div class="">
            <mat-form-field class="full-width">
              <input
                type="password"
                name="confirmPassword"
                required
                matInput
                appEqualValidator="password"
                [(ngModel)]="signupData.confirmPassword"
                #confirmPassword="ngModel"
                placeholder="Confirm Password"
                value="">
            </mat-form-field>
            <small 
              *ngIf="confirmPassword['errors'] && (confirmPassword.dirty || confirmPassword.touched)" 
              class="form-error-msg"> Password mismatch </small>
          </div>
          
          <div class="pb-1">
            <mat-checkbox
              name="isAgreed"
              required
              [(ngModel)]="signupData.isAgreed"
              #isAgreed="ngModel" 
              class="pb-1">I have read and agree to the terms of service.</mat-checkbox>

              <small 
                *ngIf="!isAgreed.value && (isAgreed.dirty || isAgreed.touched)" 
                class="form-error-msg"> You must agree to the terms and conditions </small>
          </div>

          <button mat-button class="mat-primary full-width mb-1" [disabled]="signupForm.invalid || !isAgreed.value">Sign up</button>
          <div class="text-center">
            <a [routerLink]="['/sessions/signin']" class="mat-primary text-center full-width">Sign in to existing account</a>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
</div>
